<template>
  <div>
    <pannel title="商品编辑">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="商品名">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="formData.category" placeholder="请选择活动区域">
            <el-option
              :label="item.cateName"
              :value="item.cateName"
              v-for="(item,index) in cateList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input type="number" v-model="formData.price"></el-input>
        </el-form-item>

        <el-form-item label="图片">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :on-success="uploadSuccess"
            action="http://localhost:5000/goods/goods_img_upload"
          >
            <img
              v-if="formData.imgUrl"
              :src="baseUrl + formData.imgUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="商品描述">
          <el-input type="textarea" v-model="formData.goodsDesc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveBtn"> 保存信息</el-button>
          <el-button @click="$router.push('/goodsList')">取消修改</el-button>
        </el-form-item>
      </el-form>
    </pannel>
  </div>
</template>

<script>
import Pannel from "@/components/Pannel.vue";
import { goodsInfo, cateAllList,editGoodsInfo} from "@/api/goods";
export default {
  data() {
    return {
      id: "",
      formData: {},
      baseUrl: "http://127.0.0.1:5000",
      cateList: [],
    };
  },
  components: {
    Pannel,
  },
  methods: {
      //图片上传成功---修改formData.imgUrl 改为新的图片的地址
      uploadSuccess(res){
          console.log(res);
          this.formData.imgUrl = res.imgUrl;
      },
    //请求商品详情
    async getgoodsInfo() {
      let data = { id: this.id };
      let res = await goodsInfo(data);
      //默认数据的赋值
      this.formData = { ...res.data };
      console.log(this.formData);
    },
    async getCateAllList() {
      let res = await cateAllList();
      this.cateList = res.categories;
      console.log(this.cateList);
    },
    //保存信息
   async saveBtn(){
        console.log(this.formData);
        //截取 图片的地址 只保留图片的名字
        let imgUrl =  this.formData.imgUrl 
        this.formData.imgUrl = imgUrl.slice(imgUrl.lastIndexOf('/')+1)
        console.log(this.formData);
        //请求接口
        let res = await editGoodsInfo(this.formData);
        console.log(res);
        if(res.code ==0){
            this.$message.success('修改商品成功')
            this.$router.push('/goodsList');
        }
    }
  },
  created() {
    //进入页面的瞬间 --获取 商品id
    this.id = this.$route.query.id;
    console.log(this.id);
    //获取商品详情---页面渲染
    this.getgoodsInfo();
    //获取所有的分类
    this.getCateAllList();
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>